<template>
  <div>
    <div class="NewAiRobot">
      <div class="NewAiRobot_content">
        <div class="NewAiRobot_content_top">
          <div class="content_top_dd">AI机器人应用</div>
          <div class="content_top_btn notBlue" @click="addRobot"><span>+</span>创建机器人</div>
        </div>
        <div class="NewAiRobot_content_center" v-loading="loadingRobot" element-loading-spinner="el-icon-loading" element-loading-text="拼命加载中" element-loading-background="rgba(255, 255, 255, 1)">
          <div v-for="(item, index) in items" :key="item.id" class="content_center_list">
            <div class="center_list_top">
              <div class="list_top_icon"><img src="@a/img/sv67.svg"/></div>
              <div class="list_top_txt">
                <div class="top_txt_title">
                  <div class="txt_title_dd">{{ item.name }}</div>
                  <div class="txt_title_dt">
                    <div class="title_dt_li notBlue" @click="goIndex(item.id, item.name,'/alRobot/myRobotDataAnalysis/myRobotDataAnalysis')" >进入</div>
                    <div class="title_dt_li notBlue" @click="goIndex(item.id, item.name,'/alRobot/myRobotSetUp/myRobotSetUp')">设置</div>
                  </div>
                </div>
                <div class="top_txt_bottom">{{ item.brief_introduction }}</div>
              </div>
            </div>
            <div class="center_list_bottom">
              <div class="list_bottom_left">
                {{ item.product_name }}
                <div class="bottom_left_sj notBlue" @click="upgradeRobot(item)">升级</div>
                <span></span>到期时间：{{ item.expiration_time_str }}
                <div class="bottom_left_sj notBlue"  @click="renewRobot(item.id)" v-if="item.daily_price > 0">续费</div>
              </div>
              <div class="list_bottom_right">
                <div class="bottom_right_li notBlue" @click="shareRobot(item.id)"><img
                    src="@a/img/sv96.svg"/></div>
                <div class="bottom_right_li notBlue">
                  <img src="@a/img/sv97.svg"/>
                  <div class="right_li_down">
                    <div class="li_down_padding">
                      <div class="li_down_edit notBlue" @click="goIndex(item.id, item.name,'/alRobot/myRobotSetUp/myRobotSetUp')">编辑</div>
                      <div class="li_down_delete notBlue" @click.stop="confirmDelete(index)">删除</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>


        </div>
        <div class="NewAiRobot_content_application">
          <div class="content_application_title">
            <div class="application_title_dd">👉 只需3步，轻松创建属于你的应用</div>
            <div class="application_title_dt">导入私有知识库、即可获得适合自己业务场景的Chat机器人</div>
          </div>
          <div class="content_application_txt">
            <div class="application_txt_list">
              <div class="txt_list_top">
                <div class="list_top_icon"><img src="@a/img/sv98.svg"/></div>
                <div class="list_top_txt">
                  <div class="top_txt_dd">开通机器人</div>
                  <div class="top_txt_dt">选择机器人套餐</div>
                </div>
                <div class="list_top_icon2"><img src="@a/img/sv101.svg"/></div>
              </div>
              <div class="txt_list_bottom">
                <span>1</span>
              </div>
            </div>
            <div class="application_txt_list">
              <div class="txt_list_top">
                <div class="list_top_icon"><img src="@a/img/sv99.svg"/></div>
                <div class="list_top_txt">
                  <div class="top_txt_dd">知识准备</div>
                  <div class="top_txt_dt">上传文档或URL</div>
                </div>
                <div class="list_top_icon2"><img src="@a/img/sv101.svg"/></div>
              </div>
              <div class="txt_list_bottom">
                <span>2</span>
              </div>
            </div>
            <div class="application_txt_list">
              <div class="txt_list_top">
                <div class="list_top_icon"><img src="@a/img/sv100.svg"/></div>
                <div class="list_top_txt">
                  <div class="top_txt_dd">完成应用搭建</div>
                  <div class="top_txt_dt">在线Web式体验应用</div>
                </div>
              </div>
              <div class="txt_list_bottom">
                <span>3</span>
              </div>
            </div>
          </div>
        </div>
      </div>


      <!-- 分享问答机器人 -->
      <div class="alRobotWindow" v-show="alRobotWindow">
        <div class="alRobotWindow_content" v-loading="loading">
          <div class="alRobotWindow_content_title">
            <div class="content_title_left"><span></span>分享问答机器人</div>
            <div class="content_title_right" @click="alRobotWindow = !alRobotWindow"><i class="el-icon-close"></i></div>
          </div>
          <div class="alRobotWindow_content_txt">
            <div class="content_txt_list">
              <div class="txt_list_dd">分享状态</div>
              <div class="txt_list_dt">
                <el-radio v-model="radio" @input="changeShare" label="0">关闭</el-radio>
                <el-radio v-model="radio" @input="changeShare" label="1">开启</el-radio>
              </div>
            </div>
            <div class="content_txt_title">将以下链接分享出去，让更多人可以访问该应用</div>
            <div class="content_txt_href">
              <a :href="link" target="_blank">{{ link }}</a>
            </div>
            <div class="content_txt_list">
              <div class="txt_list_dd">访问密码</div>
              <div class="txt_list_dt">
                <el-input v-model="input" placeholder="请输入内容" @blur="changePassword"></el-input>
              </div>
            </div>
          </div>
          <div class="alRobotWindow_content_btn">
            <button class="notBlue" @click="copyLink"><img src="@a/img/sv102.svg"/>复制链接</button>
          </div>
        </div>
      </div>


      <!-- 升级套餐 -->
      <div class="UPackageWindow" v-show="UPackageWindow">
        <div class="UPackageWindow_body">
          <div class="UPackageWindow_bg"><img src="@a/img/bg34.jpg"/></div>
          <div class="UPackageWindow_close notBlue" @click="UPackageWindow = !UPackageWindow"><img
              src="@a/img/clase2.svg"/></div>
          <div class="UPackageWindow_title">
            <div class="UPackageWindow_title_dd">👉 请选择要升级到哪个套餐</div>
            <div class="UPackageWindow_title_dt">可以根据您团队规模与业务需求，选择相应版本</div>
          </div>
          <div class="UPackageWindow_content">
            <div class="UPackageWindow_content_list" v-for="product in products" v-bind:class="{ 'NotUpgrade': !product.can_update }">
              <div class="content_list_top">
                <div class="list_top_dd">{{ product.name }}</div>
                <div class="list_top_dt">{{ product.describe}}</div>
                <div class="list_top_icon"><img src="@a/img/sv103.svg"/></div>
              </div>
              <div class="content_list_bottom">
                <div class="list_bottom_dd" v-if="product.price == 0"><span>￥{{ product.price }}</span>/{{product.duration_days}}天</div>
                <div class="list_bottom_dd" v-else><span>￥{{ product.price }}</span>/年</div>
                <div class="list_bottom_dt notBlue" v-if="product.can_update" @click="toUpgrade(product.id)">升级到此版本</div>
                <div class="list_bottom_dt notBlue" v-else>无法升级</div>
                <div class="list_bottom_p">
                  <div class="bottom_p_li">
                    <div class="p_li_left">每日对话</div>
                    <div class="p_li_right">{{product.daily_conversation_limit}}次</div>
                  </div>
                  <div class="bottom_p_li">
                    <div class="p_li_left">知识库字数</div>
                    <div class="p_li_right">{{product.word_limit / 10000}}万字</div>
                  </div>
                  <div class="bottom_p_li" v-for="item in product.items">
                    <div class="p_li_left">{{ item }}</div>
                    <div class="p_li_right"><img src="@a/img/sv104.svg"/></div>
                  </div>

                </div>
              </div>
            </div>

            <div class="UPackageWindow_content_list">
              <div class="content_list_top">
                <div class="list_top_dd">私有部署</div>
                <div class="list_top_dt">按客户需求针对性开发</div>
                <div class="list_top_icon"><img src="@a/img/sv103.svg"/></div>
              </div>
              <div class="content_list_bottom">
                <div class="list_bottom_dd"><b>021-56503977</b></div>
                <div class="list_bottom_dt notBlue">联系客服</div>
                <div class="list_bottom_p">
                  <div class="bottom_p_li">
                    <div class="p_li_left"><b>企业版功能</b></div>
                    <div class="p_li_right"><b>全部</b></div>
                  </div>
                  <div class="bottom_p_li">
                    <div class="p_li_left">定制化开发</div>
                    <div class="p_li_right"><img src="@a/img/sv104.svg"/></div>
                  </div>
                  <div class="bottom_p_li">
                    <div class="p_li_left">针对性解决方案</div>
                    <div class="p_li_right"><img src="@a/img/sv104.svg"/></div>
                  </div>
                  <div class="bottom_p_li">
                    <div class="p_li_left">专属客户经理</div>
                    <div class="p_li_right"><img src="@a/img/sv104.svg"/></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>


    </div>
  </div>
</template>


<script>
import {Message, MessageBox} from "element-ui";
import {api} from "@/api-js";
import {addUpgrade} from "@/api-js/path/newOrders";

export default {
  data() {
    return {
      loading: false,
      loadingRobot: false,
      addRobotShow: false,
      items: [],
      dialogVisible: false,
      products: [],
      upgrade_robot_id: 0,
      robot_id: 0,

      alRobotWindow: false,
      UPackageWindow: false,
      radio: '0',
      input: 'af4514',
      link: "https://maas.aminer.cn/shareapp/?share code=rwtovVU1EO49iCG",
    };
  },
  components: {},
  methods: {
    addRobot(){
      // this.$router.push({path: '/alRobot/NewAiRobotNewPurchase/NewAiRobotNewPurchase', query: {product_id: 3}})
      window.open('https://www.ai-dog.net/product/4.html')
    },
    renewRobot(id){
      this.$router.push({path: '/alRobot/NewAiRobotRenew/NewAiRobotRenew', query: {robot_id: id}})
    },
    async upgradeRobot(robot){
      await this.getProductList(robot.id)
      this.upgrade_robot = robot;
      this.UPackageWindow = true
    },
    async toUpgrade(product_id) {
      const [e, r] = await api.newOrders.addUpgrade(this.upgrade_robot.id, product_id)
      if (!e && r) {
        if(r.code === 1){
          await this.$router.push({path: '/alRobot/NewAiRobotDetails/NewAiRobotDetails', query: {order_id: r.result.order_id}})
        }
      }
    },

    async getProductList(robot_id) {
      const [e, r] = await api.robotProducts.list(robot_id)
      if (!e && r) {
        this.products = r.result
      }
    },

    //链接复制
    copyLink() {
      const el = document.createElement('textarea');
      el.value = this.link;
      document.body.appendChild(el);
      el.select();
      document.execCommand('copy');
      document.body.removeChild(el);
      this.$message({
        message: '已复制',
        type: 'success'
      });
    },
    closeAddRobotWindow() {
      this.addRobotShow = false
      this.getList()
    },
    confirmDelete(index) {
      MessageBox.confirm('确定删除该项吗？', '提示', {
        type: 'warning'
      })
          .then(() => {
            this.removeItem(index);
          })
          .catch(() => {
            // 取消删除操作
          });
    },
    showDialog() {
      this.addRobotShow = true;
    },
    async removeItem(index) {
      const [e, r] = await api.robot.remove({id: this.items[index].id});
      if (!e && r) {
        Message.success('删除成功');
        await this.getList()
      }
    },
    async getList() {
      this.loadingRobot = true
      const [e, r] = await api.robot.list();
      this.loadingRobot = false
      if (!e && r) {
        this.items = r.result;
      }
    },
    goIndex(id, name, path) {
      localStorage.setItem('robotId', id);
      localStorage.setItem('robotName', name);
      this.$store.commit('setRobotId', id);
      this.$store.commit('setRobotName', name);
      this.$router.push(path);
    },
    async shareRobot(id){
      this.robot_id = id;
      this.alRobotWindow = true;
      this.loading = true;
      const [e, r] = await api.robot.getShareUrl(id)
      this.loading = false;
      if(!e && r){
        if(r.code === 1){
          this.link = r.result.share_url
          this.input = r.result.share_password
          this.radio = r.result.is_share + ''
        }
      }
    },
    async changeShare(e){
      await api.robot.setShareStatus(this.robot_id, e)
    },
    async changePassword(){
      if(this.input){
        await api.robot.setSharePassword(this.robot_id, this.input)
      }else{
        Message.error('请输入密码')
      }
    },
  },
  mounted() {
    this.getList()
  }
  ,
}
;
</script>


<style>
@import "NewAiRobot.css";
</style>
